<template>
  <div class="login">
    <el-form v-if="hasCount" :rules="loginRules" ref="ruleForm" class="login-form" :label-position="labelPosition"
      label-width="80px" :model="loginForm">
      <div class="sign-up">
        <div>

          <p @click="hasCount = false">切换</p>
        </div>
      </div>

      <h1>登录</h1>

      <el-form-item label="账户/手机号" prop="Phone_Number">
        <el-input v-model="loginForm.Phone_Number"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="Password">
        <el-input v-model="loginForm.Password"></el-input>
      </el-form-item>
      <div class="forgot-password">
        忘记密码
      </div>
      <!-- <button @click="toLogin()">登录</button> -->
      <el-form-item class="login-but">
        <el-button type="primary" round @click="login('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <div v-else>
      <el-form :model="registerFrom" :rules="registerRules" ref="registerForm" class="login_form"
        :label-position="labelPosition" label-width="80px">
        <div class="sign-up">
          <div>

            <p @click="hasCount = true">切换</p>
          </div>
        </div>
        <h1>注册</h1>
        <el-form-item label="请输入常用手机号" prop="Phone_Number">
          <el-input v-model="registerFrom.Phone_Number"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="Password">
          <el-input v-model="registerFrom.Password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="registerFrom.checkPass"></el-input>
        </el-form-item>
        <el-form-item class="login-btn">
          <el-button type="primary" round @click="register('registerForm')">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {

  data() {
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('电话号码'));
        } else {
          if (value === 11) {
            callback(new Error('手机号码格式错误'));

          } else {
            callback();
          }
        }
      }, 1000);
    };

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('手机号不能为空'));
      } else if (value !== this.registerFrom.Password) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };
    return {
      labelPosition: 'top',
      hasCount: true,
      loginForm: {
        Phone_Number: "15577262650",
        Password: 'admin123'
      },
      registerFrom: {
        Phone_Number: "15577262650",
        Password: '123456',
        checkPass: '123456',
      },
      loginRules: {
        Phone_Number: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        Password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
      },
      registerRules: {
        Phone_Number: [
          { required: true, validator: validatePhone, trigger: 'blur' },
        ],
        Password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass, trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    login() {
      axios
        .post('api/User/Login', this.loginForm)
        .then(res => {

          console.log(res.data);
          if (res.data.statusCode == 200) {

            this.$message({
              message: "登陆成功",
              type: "success"
            })
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('user', JSON.stringify(res.data.userInfo[0]))
            // console.log(localStorage.getItem('token'));
            this.$store.state.isLogin = !this.$store.state.isLogin;
            this.$router.push("/home");
          } else {
            this.$message({
              message: "登陆失败，请输入正确的手机号或密码!",
              type: "error"
            })
          }

        }).catch(error => {
          console.log(error);
        });
    },
    register() {
      axios
        .post('api/User/Register', this.registerFrom)
        .then(function (res) {
          console.log(res);
          if (res.data.statusCode == 200) {
            this.$message({
              message: "注册成功",
              type: "success"
            })
          
          }
    
        }).catch(function (error) {
          console.log(error);
        });
    },


  },

}

</script>
